<template>
  <el-container style="margin: auto">
    <el-main>
      <el-header style="margin: auto;height: auto"><h2>用户的租户ID信息统计: </h2></el-header>
      <div id="weightContainer" />
      <el-header style="margin: auto;height: auto"><h2>用户的权限ID信息统计: </h2></el-header>
      <div id="inContainer" />
      <div>
        <el-header style="margin: auto;height: auto"><h2>权限介绍 </h2></el-header>
        <ul>
          <li>管理员：1</li>
          <li>超市：2</li>
          <li>运输物流：3</li>
          <li>农场：4</li>
          <li>工厂：5</li>
        </ul>
      </div>
    </el-main>
  </el-container>

</template>

<script>
import { Column } from '@antv/g2plot'
import { Bar } from '@antv/g2plot'
import request from '@/request'

export default {
  name: 'EnChart',
  data() {
    return {
      data: [],
      tenantId: ''
    }
  },
  created() {
    this.load()
  },
  mounted() {
  },
  methods: {
    load() {
      request.get('/user/chatData1', {
        params: {
          tenantId: this.tenantId
        }
      }).then(res => {
        // todo:将拿到的数组按照对象属性value排序
        const newArrByInt = this.dataSortByValue(res.data, 'sums')
        // todo:数组属性值改名
        const newJson = this.arrChangeName(newArrByInt, newArrByInt, 'sums', '租户为')
        // todo:生成图表
        const column = new Bar('weightContainer', {
          data: newJson,
          yField: 'id',
          xField: '租户为',
          yAxis: {
            label: {
              autoRotate: false
            }
          },
          scrollbar: {
            type: 'vertical'
          },
          tooltip: {
            fields: ['租户为']
          }
        })
        // todo:渲染图表
        column.render()
      })
      request.get('/user/chatData2', {
        params: {
          tenantId: this.tenantId
        }
      }).then(res => {
        // todo:将拿到的数组按照对象属性value排序
        const newArrByInt = this.dataSortByValue(res.data, 'sums')
        // todo:数组属性值改名
        const newJson = this.arrChangeName(newArrByInt, newArrByInt, 'sums', '权限为')

        // todo:生成图表
        const column = new Column('inContainer', {
          data: newJson,
          xField: 'id',
          yField: '权限为',
          xAxis: {
            label: {
              autoRotate: false
            }
          },

          scrollbar: {
            type: 'horizontal'
          }
        })

        column.render()
      })
    }
  }
}

</script>

<style scoped>
h2 {

  font-family: Arial, sans-serif;

  font-size: 24px;

  color: #fff;

  padding: 4px;

  background-color: #696;

}
</style>
